<template>
	<el-dialog v-model="dialogHeatScheduleEdit" title="结晶器浇次" width="1300" center align-center>
		<!-- 结晶器浇次选择 -->
		<div class="flex padding">
			<div class="jjq-left solid-b radius-sm">
				<pol-table ref="polTableRef" v-bind="tableOpt" cellClassName="cellClass" @rowClick="rowClick">
					<template #ItemCode="{row}">
						<span :class="row.ItemName === '浇注完成' ? 'text-gray' : 'text-black cursor'">{{row.ItemCode}}</span>
					</template>
					<template #ItemName="{row}">
						<span :class="row.ItemName === '浇注完成' ? 'text-gray' : 'text-black cursor'">{{row.ItemName}}</span>
					</template>
				</pol-table>
			</div>
			<div class="flex-sub padding margin-left-sm solid-b radius-sm">
				<el-divider content-position="left">结晶器浇次详情</el-divider>
				<div class="flex align-center margin-top">
					<div class="flex-sub">结晶器浇次</div>
					<div class="flex-sub margin-lr">状态</div>
					<div class="flex-sub">开始时刻</div>
					<div class="flex-sub margin-lr">结束时刻</div>
					<div class="flex-sub">总炉次</div>
					<div class="flex-sub margin-left">总铸坯</div>
				</div>
				<div class="flex align-center margin-top">
					<div class="flex-sub lc-input">20250092</div>
					<div class="flex-sub margin-lr lc-input">浇注中</div>
					<div class="flex-sub lc-input">25-02-28 01:18</div>
					<div class="flex-sub margin-lr lc-input">480992</div>
					<div class="flex-sub lc-input">18</div>
					<div class="flex-sub margin-left lc-input">913</div>
				</div>

				<div class="flex margin-top solid-top-b padding-top">
					<div class="luci-box cursor" :class="item.type === luciType ? 'btn-bg-blue text-white' : 'bg-white solid-b'" v-for="(item, index) in lucTypeList" :key="index" @click="luciClick(item)">
						{{item.name}}
					</div>
				</div>

				<div class="flex align-center margin-top">
					<div class="flex-sub">总炉次</div>
					<div class="flex-sub margin-lr">总重量</div>
					<div class="flex-sub">开浇炉号</div>
					<div class="flex-sub margin-lr">开浇熔炼号</div>
					<div class="flex-sub">停浇炉号</div>
					<div class="flex-sub margin-left">停浇熔炼号</div>
				</div>
				<div class="flex align-center margin-top">
					<div class="flex-sub lc-input">18</div>
					<div class="flex-sub margin-lr lc-input">1129.6</div>
					<div class="flex-sub lc-input">2065994</div>
					<div class="flex-sub margin-lr lc-input">E12502078XX</div>
					<div class="flex-sub lc-input">202501081</div>
					<div class="flex-sub margin-left lc-input">E22502163XX</div>
				</div>

				<pol-table class="margin-top" ref="polTableRef" v-bind="tableOpt2" cellClassName="cellClass" height="450px" @rowClick="rowClick"></pol-table>
			</div>
		</div>
	</el-dialog>


</template>

<script setup>
	import { ref } from 'vue';
	const emit = defineEmits(['rowClick']);

	//表格配置
	const columns = ref([
		{ label: '结晶器浇次ID号', key: 'ItemCode', align: 'center', slot: true },
		{ label: '状态', key: 'ItemName', align: 'center', width: '100px', slot: true }
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '20250092',
				ItemName: '浇注中'
			},
			{
				ItemCode: '20250093',
				ItemName: '浇注中'
			},
			{
				ItemCode: '20250094',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250095',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250096',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250097',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250098',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250099',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250090',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250092',
				ItemName: '浇注完成'
			},
			{
				ItemCode: '20250092',
				ItemName: '浇注完成'
			}
		]
	});


	//表格配置
	const columns2 = ref([
		{ label: '序号', key: 'ItemCode', align: 'center', width: '80' },
		{ label: '二级炉次', key: 'ItemName', align: 'center' },
		{ label: '熔炼号', key: 'ItemValue', align: 'center' },
		{ label: '开始时刻', key: 'IsDefault', align: 'center', width: '140' },
		{ label: '结束时刻', key: 'P_IsSys', align: 'center', width: '140' },
		{ label: '开浇重量', key: 'P_IsReadOnly', align: 'center' },
		{ label: '停浇重量', key: 'gangbao', align: 'center' },
		{ label: '浇注重量', key: 'kaishi', align: 'center' },
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},

			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},
			{
				ItemCode: '1',
				ItemName: '202501064',
				ItemValue: 'E1250207',
				IsDefault: '25-02-28 01:18',
				P_IsSys: '25-02-28 01:18',
				P_IsReadOnly: '118.553',
				gangbao: '6.921',
				kaishi: '111.632',
			},

		]
	});

	const dialogHeatScheduleEdit = ref(false) //新增编辑弹窗

	const dialogOpen = () => {
		dialogHeatScheduleEdit.value = true
	}

	const rowClick = (row) => {
		if (row.ItemName === '浇注完成') return
		emit('rowClick', row)
		dialogHeatScheduleEdit.value = false
	}

	// 炉次配置
	const lucTypeList = ref([{
		name: '炉次详细信息',
		type: 'plan'
	}, {
		name: '铸坯详细信息',
		type: 'ejection'
	}])
	const luciType = ref('plan') //炉次类型，plan计划信息、ejection 出坯信息
	function luciClick(item) {
		luciType.value = item.type
	}


	// 输出组件的方法，让外部组件可以调用
	defineExpose({
		dialogOpen, //弹窗
	});
</script>

<style lang="scss" scoped>
	.jjq-left {
		flex: 0 0 250px;
	}

	.lc-input {
		padding: 10px;
		border: 1px solid #e1e1e1;
		border-radius: 4px;
		background-color: #f1f1f1;
	}

	.luci-box {
		padding: 10px 30px;
	}
</style>